<template>
  <view class="">
    <view class="container">
      <!-- <u-navbar leftIcon=" " :title="stock.storeName" :placeholder="true" /> -->

      <!--       <view
        :style="{ textAlign: classifyConfig.setStyle.linkPosition }"
        class="title"
        v-if="classifyConfig.setStyle.linkName"
      >
        店铺名称：{{ classifyConfig.setStyle.linkName }}
      </view> -->
      <view
        class="title"
        style="
          display: flex;
          justify-content: space-between;
          align-items: center;
          background-color: #fff;
          margin-left: 0;
          padding-left: 20rpx;
          background-color: #2f2f2f;
        "
      >
        <view class="left" style="display: flex; align-items: center">
          <text style="font-size: 34rpx; color: #fff">
            {{ deskInfo.name }}
          </text>
          <text style="font-weight: 500; font-size: 22rpx; color: #ddd">
            ({{ orderInfo.person }}人)
          </text>
          <u-icon name="edit-pen" v-on:click="onEditPersonClick"></u-icon>
        </view>
        <view class="right" style="font-size: 22rpx; color: #fff">
          <text @click="onMenberClick">会员</text>
          <text style="margin-left: 31rpx; margin-right: 22rpx">操作</text>
        </view>
      </view>

      <!-- 单列模式start -->
      <view class="main">
        <!-- 左侧菜单 begin -->
        <scroll-view
          class="menu-bar"
          scroll-y
          scroll-with-animation
          :scroll-top="categoryTop"
          style="height: 100vh; padding-bottom: 280rpx; overflow: unset"
        >
          <view class="wrapper" v-if="categories.length > 0">
            <view
              class="menu-item"
              :id="`category-${category.id}`"
              @tap="handleMenuSelected(category.id)"
              :class="{ active: currentCategoryId === category.id }"
              v-for="(category, index) in categories"
              style="overflow: unset; text-wrap: wrap"
              :key="index"
            >
              <!-- <image :src="category.category_image_url" class="image" mode="widthFix"></image> -->
              <view
                class="title"
                style="
                  max-width: 4em;
                  position: relative;
                  overflow: unset;
                  font-size: 24rpx;
                "
                >{{ category.name }}
                <text
                  style="
                    position: absolute;
                    top: -15rpx;
                    right: -20rpx;
                    font-size: 20rpx;
                    flex-shrink: 0;
                    color: #fff;
                    width: 30rpx;
                    height: 30rpx;
                    line-height: 30rpx;
                    text-align: center;
                    border-radius: 100%;
                    background: linear-gradient(135deg, #fbc960, #f0b947);
                    color: #222222;
                  "
                  v-if="
                    cart.reduce((p, item) => {
                      if (item.foodTypeId == category.id) {
                        return p + item.nums;
                      } else {
                        return p;
                      }
                    }, 0) > 0
                  "
                  class="cata-num"
                >
                  {{
                    cart.reduce((p, item) => {
                      if (item.foodTypeId == category.id) {
                        return p + item.nums;
                      } else {
                        return p;
                      }
                    }, 0)
                  }}</text
                >
              </view>
            </view>
          </view>
        </scroll-view>
        <!-- 左侧菜单 end -->
        <!-- 右侧商品列表 begin -->
        <scroll-view
          class="product-section"
          style="height: 100%"
          scroll-y
          scroll-with-animation
          :scroll-top="productsScrollTop"
          @scroll="productsScroll"
        >
          <view class="wrapper">
            <!-- 商品 begin -->
            <view
              class="products-list"
              v-for="(category, index) in categories"
              :key="index"
              :id="`products-${category.id}`"
            >
              <view class="category-name">{{ category.name }}</view>
              <view
                v-if="category.upIcon"
                class="category-banner"
                @click="goRecommendActivity(category.url)"
              >
                <!-- 分类图片 -->
                <image
                  style="width: 534rpx; height: 175rpx; border-radius: 10rpx"
                  :src="category.upIcon"
                  mode=""
                />
              </view>
              <view class="products">
                <!-- <view class="product" v-for="(product, key) in category.items" :key="key"
									@tap="showProductDetailModal(product)"> -->
                <view
                  class="product"
                  v-for="(product, key) in category.foodList"
                  :key="key"
                  @tap="goProductDetail(product)"
                >
                  <view class="mask" v-if="product.fGuQing === 1">
                    <uni-icons
                      custom-prefix="iconfont"
                      type="icon-soldout"
                      color="#E1970A"
                      size="60"
                    />
                  </view>
                  <view
                    style="width: 170rpx; height: 170rpx; margin-right: 10rpx"
                  >
                    <image
                      lazy-load
                      :src="
                        product.image
                          ? product.image
                          : '../../../static/images/classify/imgs.png'
                      "
                      style="height: 100%; width: 100%; border-radius: 10rpx"
                      class="image"
                    ></image>
                  </view>
                  <!-- <image :src="product.image" mode="aspectFit" class="image"></image> -->
                  <view class="content" style="justify-content: flex-start">
                    <view class="name" v-if="product.name">{{
                      product.name.length > 10
                        ? product.name.slice(0, 10) + "..."
                        : product.name
                    }}</view>
                    <view
                      class="fsize-24 line-gray-6 mt-10"
                      v-if="product.description"
                    >
                      {{
                        product.description.length > 12
                          ? product.description.slice(0, 12) + "..."
                          : product.description || product.spec
                      }}
                    </view>

                    <view class="price" style="flex: 1; align-items: flex-end">
                      <!-- 会员价start -->
                      <view>
                        <view class="price-box">
                          <text class="vip-price" style="line-height: 1em">
                            <text style="font-size: 22rpx">￥</text>
                            <text
                              >{{
                                orderInfo.userId > 0
                                  ? product.vipPrice
                                  : product.posPrice
                              }}
                            </text>
                            <text
                              style="
                                font-weight: 500;
                                font-size: 20rpx;
                                color: #999999;
                              "
                              >/份<text v-if="product.specFlag">起</text></text
                            >
                          </text>
                          <bubble-box
                            v-if="
                              product.showPrice &&
                              product.showPriceName !== '原价'
                            "
                            color="#edac2f"
                            :title="product.showPriceName"
                            bg-color="linear-gradient(0deg, #111111, #333333)"
                          />

                          <text
                            class="realprice"
                            style="margin-left: 6rpx"
                            v-if="product.showPrice"
                            :class="{
                              isVip:
                                userInfo.id && product.showPriceName === '原价',
                            }"
                          >
                            ￥{{ product.showPrice }}
                          </text>
                        </view>
                      </view>
                      <!-- 会员价end -->

                      <!-- 加菜  -->
                      <view
                        style="height: 44rpx"
                        v-if="
                          productCartNum(product.id) == 0 || product.specFlag
                        "
                      >
                        <image
                          src="/static/images/common/round_add_normal.png"
                          class="add-btn"
                          @click.stop="showProductDetailModal(product)"
                        ></image>
                        <view
                          class="number-badge"
                          v-show="productCartNum(product.id)"
                        >
                          <view class="number">{{
                            productCartNum(product.id)
                          }}</view>
                        </view>
                      </view>

                      <view
                        style="
                          display: flex;
                          align-items: center;
                          height: 48rpx;
                        "
                        v-if="
                          productCartNum(product.id) > 0 && !product.specFlag
                        "
                      >
                        <view
                          class="l"
                          style="
                            width: 48rpx;
                            height: 48rpx;
                            border-radius: 24rpx;
                            border: 2px solid #f0b848;
                            color: #222222;
                            font-size: 44rpx;
                            text-align: center;
                            line-height: 36rpx;
                          "
                          @click="handleRemoveCart(product)"
                        >
                          -</view
                        >
                        <view
                          class="numb-box"
                          style="
                            font-weight: bold;
                            font-size: 26rpx;
                            color: #111111;
                            margin-left: 16rpx;
                            margin-right: 16rpx;
                          "
                          >{{ productCartNum(product.id) }}</view
                        >
                        <view
                          class="r"
                          style="
                            width: 48rpx;
                            height: 48rpx;
                            background-color: #f0b947;
                            border: 2px solid #f0b947;
                            border-radius: 24rpx;
                            color: #222222;
                            font-size: 44rpx;
                            text-align: center;
                            line-height: 36rpx;
                          "
                          @click="handleAddToShoppingCart(product)"
                        >
                          +
                        </view>
                      </view>
                    </view>
                  </view>
                </view>
              </view>
            </view>
            <!-- 商品 end -->
          </view>
        </scroll-view>

        <!-- 右侧商品列表 end -->
      </view>
      <!-- 单列模式 emd -->

      <!-- 商品详情 modal end -->

      <!-- 登录popup -->
      <login-popup ref="loginPopup"></login-popup>
    </view>

    <!-- 商品详情 modal begin -->
    <product-popup
      :materialsOtherData="materialsOtherData"
      :product="product"
      :isVip="orderInfo.userId > 0"
      :visible="productModalVisible"
      @cancel="closeProductDetailModal"
      @add-to-cart="handleAddToCartInModal"
    />

    <!-- 宫格模式的分类列表 -->
    <u-popup
      :show="gridShow"
      @close="onGridShow(false)"
      mode="left"
      bgColor="transparent"
    >
      <view class="grid-box">
        <scroll-view
          style="height: 60%; padding-top: 80rpx; width: 100%"
          class="menu-bar"
          scroll-y
          scroll-with-animation
          :scroll-top="categoryTop"
        >
          <view class="wrapper">
            <view
              class="menu-item"
              :id="`category-${category.id}`"
              @tap="handleMenuSelected(category.id)"
              :class="{ active: currentCategoryId === category.id }"
              v-for="(category, index) in categories"
              :key="index"
            >
              <view class="title">{{ category.name }}</view>
            </view>
          </view>
        </scroll-view>
      </view>
    </u-popup>

    <!-- 底部操作栏 -->
    <view
      class="bottom-opt"
      style="
        position: fixed;
        bottom: 62rpx;
        left: 0;
        right: 0;
        height: 92rpx;
        display: flex;
        align-items: center;
        justify-content: center;
      "
    >
      <view
        class="opt"
        style="
          width: 690rpx;
          height: 90rpx;
          display: flex;
          border-radius: 43rpx;
          overflow: hidden;
        "
      >
        <view
          class="opt-left"
          style="
            flex: 1;
            background-color: #2f2f2f;
            color: #fff;
            padding-left: 43rpx;
            display: flex;
            flex-direction: column;
            justify-content: center;
          "
        >
          <view style="height: 30rpx; font-weight: bold; font-size: 26rpx">
            ￥{{
              cart.reduce((p, item) => {
                return (
                  p +
                  item.nums *
                    (orderInfo.userId > 0 ? item.vipPrice : item.posPrice)
                );
              }, 0)
            }}
          </view>
          <view style="font-weight: 500; font-size: 20rpx; color: #dddddd"
            >已点{{
              cart.reduce((p, item) => {
                return p + item.nums;
              }, 0)
            }}份菜品</view
          >
        </view>
        <view
          class="opt-right"
          style="
            background: linear-gradient(135deg, #fbc960, #f0b947);
            box-shadow: 0rpx 0rpx 8rpx 0rpx rgba(0, 0, 0, 0.03);
            width: 218rpx;
            border-radius: 0 43rpx 43rpx 0;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
            font-size: 30rpx;
            color: #111111;
          "
          v-on:click="onSCClick"
          >去购物车</view
        >
      </view>
    </view>

    <!-- 开台弹窗 人数 -->
    <u-popup :show="showKtPopup" @close="close" @open="open" :closeable="true">
      <view
        class="layout"
        style="
          background-color: rgb(255, 255, 255);
          font-size: 14px;
          width: 100vw;
        "
      >
        <!-- 显示屏 -->
        <view class="screen">
          <view
            class="th"
            style="
              width: 100vw;
              height: 124rpx;
              display: flex;
              align-items: center;
              justify-content: center;
              font-size: 36rpx;
              font-weight: bold;
            "
          >
          </view>
          <view
            class="kk"
            style="
              height: 111rpx;
              margin: 0 30rpx;
              border: 1px solid #e8e8e8;
              border-radius: 10rpx;
              display: flex;
              justify-content: flex-end;
              align-items: center;
              padding: 0 25rpx;
            "
          >
            <view style="font-weight: 500; font-size: 22rpx; color: #999999"
              >请输入就餐人数:<text
                style="
                  font-weight: bold;
                  font-size: 80rpx;
                  color: #edae33;
                  margin-left: 5rpx;
                "
                >{{ person }}</text
              ></view
            >
          </view>
          <view class="ot" style="height: 30rpx"></view>
        </view>
        <!-- 输入框 start -->
        <view class="kebo" style="width: 100vw">
          <view style="grid-area: a" class="table-cell" @click="onNumClick(1)"
            >1</view
          >
          <view style="grid-area: b" class="table-cell" @click="onNumClick(2)"
            >2</view
          >
          <view style="grid-area: c" class="table-cell" @click="onNumClick(3)"
            >3</view
          >
          <view style="grid-area: d" class="table-cell" @click="onNumClick(4)"
            >4</view
          >
          <view style="grid-area: e" class="table-cell" @click="onNumClick(5)"
            >5</view
          >
          <view style="grid-area: f" class="table-cell" @click="onNumClick(6)"
            >6</view
          >
          <view style="grid-area: g" class="table-cell" @click="onNumClick(7)"
            >7</view
          >
          <view style="grid-area: h" class="table-cell" @click="onNumClick(8)"
            >8</view
          >
          <view style="grid-area: i" class="table-cell" @click="onNumClick(9)"
            >9</view
          >
          <view
            style="grid-area: o; border-bottom: 1rpx solid #fff"
            class="table-cell"
            @click="onNumClick(0)"
            >0</view
          >
          <view style="grid-area: j" class="table-cell" v-on:click="onDelClick">
            <u-icon name="backspace" size="26"> </u-icon>
          </view>
          <view
            style="
              grid-area: k;
              background: linear-gradient(34deg, #f3c45d, #edac2f);
              border-right: 1rpx solid #edac2f;
              border-bottom: 1rpx solid #edac2f;
            "
            class="table-cell"
            @click="onKtClick"
            >修改</view
          >
        </view>
        <!-- 输入框 end  -->
      </view>
    </u-popup>
  </view>
</template>

<script>
import Actions from "./components/actions/actions.vue";
import CartBar from "./components/cartbar/cartbar.vue";
import productPopup from "./components/product-popup/product-popup.vue";
import cartPopup from "./components/cart-popup/cart-popup.vue";
import { orderReverse } from "../../../common/modules/orderAssistan";
import {
  uGetStorageSync,
  uNavigateTo,
  uNavigateToWithParams,
  uRoute,
  uSetStorageSync,
  uThrottle,
  utoast,
} from "../../../utils/uniUtils";
// import BubbleBox from '@/components/bubble-box/bubble-box.vue'; BubbleBox

export default {
  components: {
    Actions,
    CartBar,
    productPopup,
    cartPopup,
  },
  data() {
    return {
      /* top: 50 + '%', // 宫格模式按钮
      left: 0, // 宫格模式按钮 */
      deskId: 0,
      orderId: 0,
      categories: [],
      cart: [],
      requireCart: [],
      product: null,
      currentCategoryId: 0, // 左侧分类显示高亮的盒子
      notices: [],
      productModalVisible: false,
      cartPopupShow: false,
      productsScrollTop: 0,
      showSearch: false,
      categoryTop: 0,
      gridShow: false,
      materialsOtherData: {},

      deskInfo: {},
      orderInfo: [],
      showKtPopup: false,
      person: 0,
      orderDetail: [],
    };
  },
  computed: {
    productCartNum(id) {
      //计算单个饮品添加到购物车的数量
      return (id) =>
        this.cart.reduce((acc, cur) => {
          if (cur.id == id) {
            return (acc += cur.nums);
          }
          return acc;
        }, 0);
    },
  },
  async onLoad(opt) {
    this.deskId = opt.deskid;
    this.orderId = opt.orderid;
    this.getClassifyList();
    this.getOrderList();
    this.cart = uGetStorageSync("order" + this.orderId) || [];
    let that = this;

    uni.$on("chooseMember", async function (data) {
      console.log("监听到事件来自 chooseMember ，携带参数 msg 为：", data);
      const res = await orderReverse({
        msgId: "",
        storeId: uGetStorageSync("store").id,
        code: 122,
        data: { orderId: that.orderId, memberId: data.id },
        sign: uGetStorageSync("orderSign"),
      });
      await that.getOrderList();
    });
  },
  onShow() {
    this.cart = uGetStorageSync("order" + this.orderId) || [];
  },
  onUnload() {
    // 移除监听事件
    uni.$off("chooseMember");
  },

  methods: {
    calcSize() {
      let h = 0;
      // 遍历购物车左侧数据，计算顶部距离
      this.categories.forEach((item) => {
        let view = uni.createSelectorQuery().select(`#products-${item.id}`); // id选择器，选中对应的id
        view
          .fields(
            {
              // fields 获取指定字段，size是height和width的意思
              size: true,
            },
            (data) => {
              if (!data) return;
              item.top = h;
              h += Math.floor(data.height);
              item.bottom = h;
            }
          )
          .exec(); // 方法用于执行选择器查询并调用之前设置的回调函数。
      });

      let categoryH = 0;
      this.categories.forEach((v) => {
        let views = uni.createSelectorQuery().select(`#category-${v.id}`);
        views
          .fields({ size: true }, (data) => {
            if (!data) return;
            v.categoryTop = categoryH;
            categoryH += Math.floor(data.height);
            v.categoryBottom = categoryH;
          })
          .exec();
      });
    },
    // 获取购物车数据
    getClassifyList() {
      let _this = this;
      orderReverse({
        msgId: "",
        storeId: uGetStorageSync("store").id,
        code: 116,
        data: [],
        sign: uGetStorageSync("orderSign"),
      }).then((res) => {
        // console.log(res);
        _this.categories = res.data;

        _this.currentCategoryId =
          _this.categories.length && _this.categories[0].id; // 左侧显示的高亮的的id，categories数据有就是用后面的
        _this.$nextTick(() => _this.calcSize());
      });
    },
    handleAddToCart(product) {
      //添加到购物车
      this.cart.push(product);
      uSetStorageSync("order" + this.orderId, this.cart);
    },

    handleAddToCartInModal(product) {
      console.log(product, "product");

      this.handleAddToCart(product);
      this.closeProductDetailModal();
    },
    closeProductDetailModal() {
      this.productModalVisible = false;
      this.product = null;
    },
    openCartDetailsPopup() {
      this.$refs["cartPopup"].open();
    },
    clearCart() {
      this.$api
        .DelCart({
          deskId: this.deskId,
        })
        .then((res) => {
          this.cart = [];
        });
    },
    handleMenuSelected(id) {
      this.productsScrollTop = this.categories.find(
        (item) => item.id === id
      ).top; // 获取到当前元素，并将scroll-top的高度设置为它的高度
      // console.log(this.categories.find(item => item.id === id).top);
      this.$nextTick(() => (this.currentCategoryId = id));
    },
    productsScroll({ detail }) {
      const { scrollTop } = detail;
      let tabs = this.categories
        .filter((item) => item.top <= scrollTop)
        .reverse();
      if (tabs.length > 0) {
        this.currentCategoryId = tabs[0].id;
        this.categoryTop = tabs[0].categoryTop;
      }
    },
    pay() {
      uni.navigateTo({
        url: "/pages/order/pay",
      });
    },
    // 立即下单
    onOrder() {
      uNavigateTo("/pages/order/confirm");
    },
    goProductDetail(item) {
      return;
    },
    goRecommendActivity(path) {
      // 判断分类推荐图片跳转路径
      if (path) {
        uni.navigateTo({
          url: path,
        });
      }
    },
    // 关闭宫格弹出层
    onGridShow(show) {
      this.gridShow = show;
    },

    // 获取点菜清单
    async getOrderList() {
      const result = await orderReverse({
        msgId: "",
        storeId: uGetStorageSync("store").id,
        code: 113,
        data: {
          orderId: this.orderId,
          deskId: parseInt(this.deskId),
        },
        sign: uGetStorageSync("orderSign"),
      });
      if (result.status == 0) {
        const { desk, master, detail } = result.data;
        console.log("result", { desk, master, detail });
        this.deskInfo = desk;
        this.orderInfo = master;
        this.orderDetail = detail;
      }
    },
    //修改人数
    async onEditPersonClick() {
      this.open();
    },

    open() {
      this.person = 0;
      this.showKtPopup = true;
    },
    close() {
      this.showKtPopup = !true;
    },

    onNumClick(i) {
      let old = this.person;
      this.person = parseInt(this.person + "" + i);
      if (this.person > 999) {
        this.person = old;
      }
    },

    onDelClick() {
      this.person = parseInt(
        (this.person + "").substring(0, (this.person + "").length - 1) || 0
      );
    },
    async onKtClick() {
      if (this.person <= 0) {
        utoast("请输入人数", "error");
        return;
      }
      let res = await orderReverse({
        msgId: "",
        storeId: uGetStorageSync("store").id,
        code: 142,
        data: {
          orderId: this.orderId,
          person: this.person,
        },
        sign: uGetStorageSync("orderSign"),
      });
      if (res.status == 0) {
        utoast("修改成功");
        this.close();
        await this.getOrderList();
      }
    },
    onMenberClick() {
      uNavigateTo("/pages/workbench/orderingAssistant/member");
    },
    onSCClick() {
      uNavigateToWithParams(
        `/pages/workbench/orderingAssistant/${
          this.cart.length > 0 ? "shoppingCart" : "orderDetail"
        }`,
        {
          orderid: this.orderId,
          deskid: this.deskId,
        }
      );
    },

    // 获取产品规格
    async showProductDetailModal(product) {
      uThrottle(async () => {
        console.log("product :>> ", product);
        if (product.specFlag) {
          const res = await orderReverse({
            msgId: "",
            storeId: uGetStorageSync("store").id,
            code: 111,
            sign: uGetStorageSync("orderSign"),
            data: { id: product.id },
          });
          this.productModalVisible = true;
          this.product = product;
          this.product.materials = res.data;
          this.materialsOtherData = res.data;
          console.log("this.product :>> ", this.product);
        } else {
          const res = this.cart.find((item) => item.id === product.id);
          console.log("res :>> ", res);
          if (res) {
            res.nums += 1;
          } else {
            this.cart.push({
              ...product,
              nums: 1,
            });
          }
          uSetStorageSync("order" + this.orderId, this.cart);
        }
      });
    },
    handleAddToShoppingCart(product) {
      const item = this.cart.find((item) => item.id == product.id);
      item.nums += 1;
      uSetStorageSync("order" + this.orderId, this.cart);
    },
    handleRemoveCart(product) {
      const idx = this.cart.findIndex((item) => item.id == product.id);
      if (!--this.cart[idx].nums) {
        this.cart.splice(idx, 1);
      }
      uSetStorageSync("order" + this.orderId, this.cart);
    },

    // 方法放上面
  },
};
</script>

<style lang="scss">
@import "./classify.scss";

.add-btn {
  width: 44rpx;
  height: 44rpx;
}

.number-badge {
  z-index: 4;
  position: absolute;
  right: -16rpx;
  // top: 100rpx;
  top: 100rpx;
  background-color: #fff;
  border-radius: 100%;
  width: 40rpx;
  height: 40rpx;
  display: flex;
  align-items: center;
  justify-content: center;

  .number {
    font-size: 20rpx;
    flex-shrink: 0;
    background-color: #ec3e40;
    color: #fff;
    width: 30rpx;
    height: 30rpx;
    line-height: 30rpx;
    text-align: center;
    border-radius: 100%;
  }
}

.vip-price {
  font-size: 34rpx;
  color: #ed4d4f;
  font-weight: normal;
}
.price-box {
  display: flex;
  align-items: flex-end;
  .realprice {
    color: #999999;
    font-size: 20rpx;
    line-height: 24rpx;
  }
  .isVip {
    text-decoration: line-through;
  }
}
.vip-box {
  background-color: #ed4d4f;
  color: #fff;
  font-size: 20rpx;
  margin-left: 10rpx;
  line-height: 30rpx;
  padding: 0 10rpx;
  border-radius: 25rpx;
}

//扫码按钮
.scan-btn {
  margin: 0% auto;
  width: 70%;
  background-color: #fff;
  padding-top: 50rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.kebo {
  display: grid;
  grid-template-columns: 187rpx 187rpx 187rpx 1fr;
  grid-template-rows: 106rpx 106rpx 106rpx 167rpx;
  grid-template-areas:
    "a b c j"
    "d e f j"
    "g h i k"
    "o o o k";
  .table-cell {
    border: #f3f3f3 0.5rpx solid;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    // font-weight: 500;
    color: #111111;
    font-size: 36rpx;
  }
}
</style>
